<template>
  <div class="right">
    <!-- 榜单操作 -->
    <div class="top-wrap">
      <div class="mask">
        <img :src="rankDetailData.coverImgUrl" alt="" width="150" />
      </div>
      <div class="info">
        <h2>{{ rankDetailData.name }}</h2>
        <div class="update">
          <i><span class="iconfont icon-clock"></span></i>
          <span>最近更新: 08月10日</span>
          <span> (刚刚更新)</span>
        </div>
        <ul class="btns">
          <li>
            <button class="play">
              <span class="iconfont icon-bofang"></span>
              <span>播放</span>
            </button>
          </li>
          <li>
            <button class="add">
              <span class="iconfont icon-jiahao"></span>
            </button>
          </li>
          <li>
            <button class="file">
              <span class="iconfont icon-24gl-folderPlus"></span>({{
                rankDetailData.subscribedCount
              }}
            </button>
          </li>
          <li>
            <button>
              <span class="iconfont icon-fanhui"></span
              >{{ rankDetailData.shareCount }}
            </button>
          </li>
          <li>
            <button><span class="iconfont icon-xiazai"></span>下载</button>
          </li>
          <li>
            <button>
              <span class="iconfont icon-xiaoxi"></span
              >{{ rankDetailData.commentCount }}
            </button>
          </li>
        </ul>
      </div>
    </div>
    <!-- 歌曲列表 -->
    <div class="to-wrap2">
      <div class="w2-title">
        <div class="left">
          <h2>歌曲列表</h2>
          <span>100首歌</span>
        </div>
        <div class="right">播放: <i>3423423</i>次</div>
      </div>
      <table class="w2-table">
        <tr class="tr-h">
          <td></td>
          <td>标题</td>
          <td>时长</td>
          <td>歌手</td>
        </tr>
        <tr
          class="tr-list"
          v-for="(track, index) in rankDetailData.tracks"
          :key="track.id"
          @mouseenter="showbtn = true"
          @mouseleave="showbtn = false"
        >
          <td>
            <span>{{ index + 1 }} </span>
            <span
              style="
                font-size: 8px;
                color: green;
                font-family: Arial, Helvetica, sans-serif;
              "
            >
              NEW</span
            >
            <!-- <span style="background-image: url()"></span> -->
          </td>
          <td>
            <img :src="track.al.picUrl" alt="" width="50" />

            <span class="iconfont icon-bofang"></span>
            <div class="song-name">{{ track.al.name }}</div>
          </td>
          <td v-if="showbtn" @mouseenter="showbtn = true">
            <span>1</span>
            <span>2</span>
            <span>3</span>
            <span>4</span>
          </td>
          <td v-else>03:11</td>
          <td>{{ track.ar[0].name }}</td>
        </tr>
      </table>
      <!-- 评论 -->
      <div class="w2-talk">
        <div class="talk-title1">
          <h2>评论</h2>
          <div>共<i>232332</i>条评论</div>
        </div>
        <!-- 添加评论 -->
        <div class="talk-input">
          <div class="head">
            <img
              src="http://p4.music.126.net/vrscgwblkecaKOFw1liTrA==/109951163754784737.jpg?param=50y50"
              class="img"
              alt=""
            />
            <div class="circle"></div>
            <textarea
              name=""
              id=""
              cols="94"
              rows="4"
              placeholder="评论"
            ></textarea>
            <div class="toBtn">
              <div>
                <span class="iconfont icon-xiaolian"></span>
              </div>
              <div>
                <span class="iconfont icon-aite"></span>
              </div>
            </div>
            <div class="btBtn2">
              <span>140</span>
              <button>评论</button>
            </div>
          </div>
        </div>
        <!-- 精彩评论 -->
        <div class="talk-well">
          <h3 class="well-title">精彩评论</h3>
          <div class="well-item">
            <div class="item-head">
              <img
                src="http://p1.music.126.net/lspQM-lCF_SBvNGiOyAJ2g==/109951163321404818.jpg?param=50y50"
                alt=""
              />
            </div>
            <div class="item-font">
              <div class="item-top">
                <a href="">爱椿的湫_</a
                ><span> : 毋庸置疑。天份1551%，承蒙关照</span>
              </div>
              <div class="item-bottom">
                <div class="date">2018年12月22日</div>
                <div class="cp">
                  <span class="iconfont icon-dianzan"></span>
                  <span>(4123)</span>
                  <span>回复</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <Pagination></Pagination>
  </div>
</template>

<script>
import { mapGetters, mapState } from "vuex";
import "./font/iconfont.css";
import Pagination from "@/components/Pagination";
export default {
  name: "rank-right",
  data() {
    return {
      showbtn: false,
    };
  },
  components: { Pagination },
  computed: {
    ...mapState("ranklist", ["rankDetailData"]),
    ...mapGetters("ranklist", ["cloudList", "earthList"]),
  },
  methods: {
    toShowBtn() {
      this.showbtn = true;
    },
    toHidden() {
      this.showbtn = false;
    },
  },
};
</script>

<style lang="less" scoped>
.right {
  float: left;
  .top-wrap {
    width: 740px;
    height: 238px;
    padding: 40px;

    box-sizing: border-box;
    display: flex;
    .mask {
      width: 158px;
      height: 158px;
      padding: 3px;
      box-sizing: border-box;
      border: 1px solid #ccc;
    }
    .info {
      text-align: left;
      margin-left: 35px;
      h2 {
        width: 473px;
        height: 24px;
        margin: 16px 0 5px 0;
        font-size: 20px;
        line-height: 24px;
      }
      .update {
        margin: 13px 0 22px 0;
      }
      .btns {
        li {
          float: left;
        }
        .iconfont {
          display: inline-block;
          width: 26px;
          color: #737373;
          font-weight: bold;
        }
        button {
          border-radius: 8%;
          border: none;
          height: 31px;
          margin-right: 6px;
          padding: 0 4px 0 4px;
          background-color: #f2f2f2;
          color: #333;
          border: 1px solid #cacaca;
        }
        .play {
          width: 66px;
          margin: 0;
          border-radius: 8% 0 0 8%;
          padding-right: 5px;
          border-right: 1px solid #999;
          color: #fff;
          background-image: url("./css/截屏2022-08-11\ 09.52.49.png");
        }
        .icon-bofang {
          font-size: 20px;
          color: #fff;
        }
        span {
          line-height: 28px;
          font-size: 12px;
        }

        .add {
          background-color: #1e6fc0;
          width: 31px;
          border-radius: 0 8% 8% 0;
          background-image: url("./css/截屏2022-08-11\ 09.52.49.png");
          span {
            color: #fff !important;
          }
        }
        .file {
          padding: 2px;

          color: #bebebe;
        }
      }
    }
  }
}
.to-wrap2 {
  width: 740px;

  padding: 0 30px 40px 40px;
  box-sizing: border-box;
  .w2-title {
    display: flex;
    justify-content: space-between;
    width: 670px;
    height: 33px;
    line-height: 28px;
    border-bottom: 2px solid #c20b0d;

    .left {
      h2 {
        float: left;
        line-height: 20px;
        font-size: 20px;
        font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif;
      }
      span {
        margin: 9px 0 0 20px;
      }
    }
    .right {
      i {
        color: #c20b0d;
        font-weight: bold;
      }
    }
  }
  .w2-table {
    width: 670px;

    box-sizing: border-box;
    border: 1px solid #ccc;
    td {
      text-align: left;
      padding: 8px 10px;
      box-sizing: border-box;
    }
    .tr-h {
      height: 35px;
      td {
        border: 1px solid #d8d8d8;
        text-align: left;
        padding: 8px 10px;
        background-color: #f7f7f7;
      }
      td:nth-child(1) {
        width: 77.5px;
      }
      td:nth-child(2) {
        width: 326px;
      }
      td:nth-child(3) {
        width: 91px;
      }
      td:nth-child(4) {
        width: 174px;
      }
    }
    .tr-list {
      td:nth-child(1) {
        text-align: center;
      }
      .icon-bofang {
        vertical-align: top;
        width: 17px;
        height: 20px;
        display: inline-block;
        font-size: 30px;
        color: #acb5bd;
        margin-top: 5px;
      }
      width: 669px;
      height: 70px;
      td {
        display: table-cell;
      }
    }
  }
  .w2-talk {
    margin-top: 40px;
    width: 670px;
    .talk-title1 {
      width: 670px;
      height: 35px;
      border-bottom: 2px solid #c20b0d;
      h2 {
        float: left;
        font-size: 20px;
      }
      div {
        float: left;
        margin: 9px 0 0 20px;
      }
    }
    .talk-input {
      overflow: hidden;
      vertical-align: top;
      margin-top: 20px;
      margin-bottom: 20px;
      position: relative;
      .head {
        .img {
          margin-bottom: 25px;
          margin-right: 10px;
        }

        .circle {
          width: 5px;
          height: 7px;
          display: inline-block;
          border: 1px solid red;
          background-color: #fff;
          border-color: transparent transparent #999 #999;
          position: absolute;
          transform: rotate(45deg);
          left: 57px;
          top: 10px;
        }
        textarea {
          padding: 5px 6px 6px;
          box-sizing: border-box;
          overflow: hidden;
          resize: none;
        }
        .toBtn {
          margin-left: 68px;
          div {
            float: left;
            margin-right: 10px;
            span {
              font-size: 20px;
              color: #999;
              font-weight: bold;
            }
          }
        }
        .btBtn2 {
          float: right;
          margin-right: 8px;
          button {
            margin-left: 10px;
            color: #fff;
            border-radius: 5%;
            border: none;
            width: 46px;
            height: 25px;
            background-image: url("./css/截屏2022-08-11\ 09.52.49.png");
          }
        }
      }
    }
    .talk-well {
      .well-title {
        border-bottom: 1px solid #999;
        text-align: left;
        font-size: 12px;
      }
      .well-item {
        padding: 15px 0 15px 0;
        border-bottom: 1px dotted #ccc;
        display: flow-root;
        .item-head {
          float: left;
        }
        .item-font {
          margin-left: 10px;
          width: 610px;
          float: left;

          .item-top {
            text-align: left;
            a {
              color: #0c73c2;
            }
          }
          .item-bottom {
            margin-top: 15px;
            height: 17px;
            .icon-dianzan {
              color: #5997d2;
            }
            .date {
              float: left;
            }
            .cp {
              float: right;
            }
          }
        }
      }
    }
  }
}
</style>
